<template>
    <div>
        <div class="Logonmode">
            <div class="Logonmode-con">
                <el-tabs v-model="activeName" type="card" @tab-click="handleClick" :stretch="true">
                    <el-tab-pane name="first">
                        <template v-slot:label>
                            <svg-icon :name="LogonmodeIcon === 2 ? '1首页图标-04' : '1首页图标-04 (1)'" width="18"
                                height="18"></svg-icon>
                            <span style="font-size: 12px;">注册非常秀账号</span>
                        </template>
                        <div class="Logonmode-con-From">
                            <FormRef @resetForm="resetForm" @LogonsubmitForm="submitForm" :FormData='FormData'
                                :ruleForm="ruleForm" :LogType="'注册'" />
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <div class="Switchlogon">
            <span>其他注册方式</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, toRefs } from 'vue';
// 表单组件
import FormRef from '@/components/Form/FormRef.vue';
// 防抖函数
import { throttling } from '@/utils/Throttling';
import { get_Logon } from '@/utils/api';
import { type FormInstance } from 'element-plus';
import {notification} from '@/utils/Notificathion';
// 父组件传递的方法
const Emit = defineEmits(['ToLogon']);

// 登录方式切换tab区域
const activeName = ref('first');
// 初始高亮的区分
const LogonmodeIcon = ref(2);

// 点击事件
const handleClick = (tab: any, event: any) => {
    switch (tab.uid) {
        case 8:
            LogonmodeIcon.value = 1;
            break;
        case 12:
            LogonmodeIcon.value = 2;
            break;
        default:
            break;
    }
};

const FormData = reactive([
    {
        label: '账号',
        prop: 'users',
        type: 'text',
        autocomplete: 'off',

    },
    {
        label: '密码',
        prop: 'password',
        type: 'password',
        autocomplete: 'off',
    },
    {
        label: '确认密码',
        prop: 'verifypassword',
        type: 'password',
        autocomplete: 'off',
    }
]);
const ruleForm: any = reactive({
    users: '',
    password: '',
    verifypassword: ''
});

// 表单确定按钮事件
const submitForm = throttling((value: object | any) => {
    if (value) {
        get_Logon({
            "username": value.users,
            "password": value.password
        }).then((event) => {
            if (event.status === 200) {
                notification('注册成功',false,'success');
                setTimeout(() => {
                    Emit('ToLogon');
                }, 1000);
            } else {
                notification('注册成功',"请稍后重试",'error');
            }
        });
    }
}, 1000);

// 表单取消按钮事件
const resetForm = throttling((formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
}, 1000);


</script>

<style scoped lang="scss">
.Logonmode {
    width: 100%;
    height: 50%;
    display: flex;

    .Logonmode-con {
        margin: auto;
        width: 80%;
        height: 100%;
        position: relative;

        .el-tabs__nav {
            display: flex;
            align-items: center;
            justify-content: center;

            .el-tabs__item {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
            }
        }

        .Logonmode-con-From {
            width: 100%;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

    }
}

.Switchlogon {
    width: 100%;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: right;
    position: relative;
    margin-top: 13px;

    span {
        display: flex;
        margin-right: 50px;
        color: blue;
    }
}
</style>